<template>
  <div>
    <el-form :inline="true" :model="trainSearch" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="trainSearch.userName" placeholder="输入学员姓名"></el-input>
      </el-form-item>
      <!-- <el-form-item label="">
        <el-input size="small"
                  v-model="trainSearch.roleId"
                  placeholder="职位"></el-input>
      </el-form-item> -->

      <template>
        <el-select v-model="role" placeholder="请选择" @change="roleChange()">
          <el-option v-for="(item,index) in roles" :key="index" :value="item.role">
          </el-option>
        </el-select>
      </template>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="userTrainTest" label="成绩" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="departmentName" label="部门" width="180">
      </el-table-column>
      <el-table-column prop="role" label="职位" width="180">
      </el-table-column>
      <el-table-column prop="schedule" label="学习进度" width="180">
      </el-table-column>
      <el-table-column prop="isSuccess" label="考试进度" width="180">
      </el-table-column>
      <el-table-column prop="score" label="分数" width="180">
      </el-table-column>

      <!-- <el-table-column label="操作"
                       width="180">
        <template slot-scope="scope">
        </template> 
      </el-table-column>  -->
    </el-table>
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather">
    </Pagination>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import userTrainApi from '@/api/user_train'
  import roleApi from '@/api/role'

  export default {
    data() {
      return {
        userTrainTest: [], //当前课程所有用户的成绩
        trainSearch: {
          roleId: 0,
          trainId: 0,
          userName: '',
        },
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10,
        },
        role: '',
        roles: [],
      }
    },
    props: ['trainIdTest', 'isChange'],
    watch: {
      trainIdTest: {
        handler(newValue, oldValue) {
          console.log("值被更改", newValue);
          this.trainSearch.trainId = newValue
          this.userTrainApi()
          this.getAllRole()
        },
      },
      isChange: {
        handler(newValue, oldValue) {
          console.log("值被更改", newValue);
        }
      }
    },
    comments: {
      Pagination,
    },
    methods: {
      userTrainApi() {
        userTrainApi
          .findTrainUserScore(this.trainSearch, 1, 2)
          .then((response) => {
            this.userTrainTest = response.data.list
            console.log('学员成绩', response)
            console.log(this.userTrainTest)
          })
          .catch()
      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getdata(this.formInline)
      },
      //获取所有角色
      getAllRole() {
        roleApi
          .findAllRole()
          .then((response) => {
            this.roles = response.data
            console.log('所有角色', this.roles)
          })
          .catch()
      },
      search() {
        this.userTrainApi()
      },
      //获得当前选择的角色
      roleChange(id) {
        for (const key in this.roles) {
          if (this.roles[key].role == this.role) {
            this.trainSearch.roleId = this.roles[key].id
          }
        }
      },
    },
  }

</script>

<style>
</style>
